<template>
  <div v-loading="loadingFlag">
    <cus-Breadcrumb level1="反馈信息页面" level2="习题反馈" class="mb20"></cus-Breadcrumb>
    <el-card class="pore">
      <el-pagination
        class="pagenation1"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[15]"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <el-select
        v-model="feedbackSearch.FeedbackValue"
        placeholder="请选择反馈类型"
        @change="FeedbackValueSendMessage"
      >
        <el-option
          v-for="item in FeedbackList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          @click.native="changeFeedbackValue(item)"
        ></el-option>
      </el-select>
      <el-switch
        class="switchStyle"
        v-model="value2"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="已处理"
        inactive-text="未处理"
        :active-value="0"
        :inactive-value="1"
        @change="switchSearchFeedback"
      ></el-switch>
      <el-tag>点击下拉菜单选择类型，点击滑块选择处理状态，点击查看详情对反馈的习题进行修改</el-tag>
      <el-table
        :data="tableData7.filter(data => !search || data.questionContent.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="习题内容" prop="questionContent" width="400"></el-table-column>
        <el-table-column label="反馈类型" prop="category" width="140"></el-table-column>
        <el-table-column label="问题说明" prop="comment"></el-table-column>
        <el-table-column label="反馈时间" prop="modifyTime" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="反馈状态" prop="deal">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.deal">未处理</el-tag>
            <el-tag type="success" v-if="!scope.row.deal">已处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template slot="header">
            <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="反馈详情" :visible.sync="editChild" class="dialog pore">
      <el-form ref="form" label-width="80px">
        <el-form-item label="试题内容" class="formItem">
          <el-input class="inputStyle" disabled placeholder="试题内容" v-model="showList.content"></el-input>
        </el-form-item>
        <el-form-item label="试题类型" class="formItem">
          <el-input class="inputStyle" disabled v-model="showList.kind" placeholder="试题类型"></el-input>
        </el-form-item>
        <el-form-item label="正确选项" class="formItem">
          <el-input class="inputStyle" disabled placeholder="正确选项" v-model="showList.rightOption"></el-input>
        </el-form-item>
        <el-form-item label="A选项" class="limit-min-width">
          <el-input class="inputStyle" disabled placeholder="题中没有此选项" v-model="option.A.content"></el-input>
        </el-form-item>
        <el-form-item label="B选项" class="limit-min-width">
          <el-input class="inputStyle" disabled placeholder="题中没有此选项" v-model="option.B.content"></el-input>
        </el-form-item>
        <el-form-item label="C选项" class="limit-min-width">
          <el-input class="inputStyle" disabled placeholder="题中没有此选项" v-model="option.C.content"></el-input>
        </el-form-item>
        <el-form-item label="D选项" class="limit-min-width">
          <el-input class="inputStyle" disabled placeholder="题中没有此选项" v-model="option.D.content"></el-input>
        </el-form-item>
        <el-form-item label="E选项" class="limit-min-width">
          <el-input class="inputStyle" disabled placeholder="题中没有此选项" v-model="option.E.content"></el-input>
        </el-form-item>
        <el-form-item label="F选项" class="limit-min-width">
          <el-input class="inputStyle" disabled placeholder="题中没有此选项" v-model="option.F.content"></el-input>
        </el-form-item>
      </el-form>
      <div class="showStatus">
        <el-form>
          <el-form-item label="问题说明" class="limit-min-width">
            <el-input type="textarea" disabled :rows="15" placeholder="请输入内容" v-model="comment"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-tag class="editInfo">点击编辑对习题进行编辑，编辑完成自动跳回，提交更改完成</el-tag>
      <div class="buttonStyle">
        <el-button type="primary" @click="openEdit" v-if="fktmEdit">点击编辑</el-button>
        <el-button type="success" @click="doDeal" v-if="fktmCommit">提交更改</el-button>
        <el-button type="danger" @click="cancel" v-if="fktmCancel">取消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑习题 -->
    <el-dialog title="编辑习题" :visible.sync="editFlag" class="dialog">
      <el-form status-icon ref="ruleForm2" label-width="140px" class="demo-ruleForm">
        <el-form-item label="试题内容" class="formItem">
          <el-input
            class="editInput"
            type="text"
            autocomplete="off"
            v-model="editExerciseList.content"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题类型" class="formItem">
          <el-radio :label="0" class="ml10" :disabled="true" v-model="kind">单选题</el-radio>
          <el-radio :label="1" class="ml10" v-model="kind" :disabled="true">判断题</el-radio>
        </el-form-item>
        <!-- <el-form-item
          label="试题类别"
          class="formItem"
        >-->
        <!-- <el-select
            allow-create
            size="small"
            default-first-option
            v-model="option.A"
            placeholder="请选择子字典分类"
          >
            <el-option
              v-for="item in ChildCategoryList"
              :key="item.id"
              :label="item.content"
              :value="item.id"
              @click.native="changeEditExeciseCateId(item)"
        ></el-option>-->
        <!-- </el-select> -->
        <!-- </el-form-item> -->
        <el-form-item label="A选项" class="limit-min-width" v-if="optionEditList.A">
          <el-input
            v-if="optionEditList.A"
            class="input-con excriseOption"
            placeholder="A选项没有内容"
            v-model="optionEditList.A.content"
          ></el-input>
          <el-radio
            :disabled="!!!optionEditList.A.content"
            label="A"
            class="ml10"
            v-model="rightOption"
            @change="pushRigthOption"
          >A为正确选项</el-radio>
        </el-form-item>
        <el-form-item label="B选项" class="limit-min-width" v-if="optionEditList.B">
          <el-input
            v-if="optionEditList.B"
            class="input-con excriseOption"
            placeholder="B选项没有内容"
            v-model="optionEditList.B.content"
          ></el-input>
          <el-radio
            :disabled="!!!optionEditList.B.content"
            label="B"
            class="ml10"
            v-model="rightOption"
            @change="pushRigthOption"
          >B为正确选项</el-radio>
        </el-form-item>
        <el-form-item label="C选项" class="limit-min-width" v-if="optionEditList.C">
          <el-input
            v-if="optionEditList.C"
            class="input-con excriseOption"
            placeholder="C选项没有内容"
            v-model="optionEditList.C.content"
          ></el-input>
          <el-radio
            :disabled="!!!optionEditList.C.content"
            label="C"
            class="ml10"
            v-model="rightOption"
            @change="pushRigthOption"
          >C为正确选项</el-radio>
        </el-form-item>
        <el-form-item label="D选项" class="limit-min-width" v-if="optionEditList.D">
          <el-input
            v-if="optionEditList.D"
            class="input-con excriseOption"
            placeholder="D选项没有内容"
            v-model="optionEditList.D.content"
          ></el-input>
          <el-radio
            :disabled="!!!optionEditList.D.content"
            label="D"
            class="ml10"
            v-model="rightOption"
            @change="pushRigthOption"
          >D为正确选项</el-radio>
        </el-form-item>
        <el-form-item label="E选项" class="limit-min-width" v-if="optionEditList.E">
          <el-input
            v-if="optionEditList.E"
            class="input-con excriseOption"
            placeholder="E选项没有内容"
            v-model="optionEditList.E.content"
          ></el-input>
          <el-radio
            :disabled="!!!optionEditList.E.content"
            label="E"
            class="ml10"
            v-model="rightOption"
            @change="pushRigthOption"
          >E为正确选项</el-radio>
        </el-form-item>
        <el-form-item label="F选项" class="limit-min-width" v-if="optionEditList.F">
          <el-input
            v-if="optionEditList.F"
            class="input-con excriseOption"
            placeholder="F选项没有内容"
            v-model="optionEditList.F.content"
          ></el-input>
          <el-radio
            :disabled="!!!optionEditList.F.content"
            label="F"
            class="ml10"
            v-model="rightOption"
            @change="pushRigthOption"
          >F为正确选项</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editExercise()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import $$ from '@/plugins/statusCode.config'
export default {
  data () {
    return {
      fktmEdit: false,
      fktmCommit: false,
      fktmCancel: false,
      kind: '',
      editFlag: false,
      rightOption: '',
      total: 0,
      value1: true,
      value2: true,
      tableData7: [],
      search: '',
      editChild: false,
      showList: '',
      optionList: '',
      loadingFlag: true,
      editExerciseList: {},
      FeedbackList: [
        // 0其他，1答案不正确，2题干错误
        {
          value: 0,
          label: '其他'
        },
        {
          value: 1,
          label: '答案不正确'
        },
        {
          value: 2,
          label: '题干错误'
        }
      ],
      option: {
        A: {
          letter: 'A',
          content: ''
        },
        B: {
          letter: 'B',
          content: ''
        },
        C: {
          letter: 'C',
          content: ''
        },
        D: {
          letter: 'D',
          content: ''
        },
        E: {
          letter: 'E',
          content: ''
        },
        F: {
          letter: 'F',
          content: ''
        }
      },
      optionObj: {
        A: {
          letter: 'A',
          content: '',
          id: ''
        },
        B: {
          letter: 'B',
          content: '',
          id: ''
        },
        C: {
          letter: 'C',
          content: '',
          id: ''
        },
        D: {
          letter: 'D',
          content: '',
          id: ''
        },
        E: {
          letter: 'E',
          content: '',
          id: ''
        },
        F: {
          letter: 'F',
          content: '',
          id: ''
        }
      },
      optionEditList: {},
      scopes: '',
      showDetail: '',
      comment: '',
      id: '',
      feedbackSearch: {
        PageSize: 10,
        pageNo: 1,
        dealNot: 1,
        FeedbackValue: 1
      },
      changeFlag: true,
      rightOptionContent: '',
      optionArr: []
    }
  },
  created () {
    const token = sessionStorage.getItem('accessToken')
    if (!token) {
      this.$message.warning('请先登录')
      this.$router.push({ name: 'login' })
    }
    this.managerNickName = sessionStorage.getItem('managerNickName')
  },
  mounted () {
    this.loadList(this.feedbackSearch)
    this.role()
  },
  methods: {
    role () {
      let arr = JSON.parse(sessionStorage.getItem('buttonRole'))
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === 'fktm-edit') {
          this.fktmEdit = true
        }
        if (arr[i] === 'fktm-commit') {
          this.fktmCommit = true
        }
        if (arr[i] === 'fktm-cancel') {
          this.fktmCancel = true
        }
      }
    },
    pushRigthOption (right) {
      this.rightOption = right
      this.rightOptionContent = this.optionEditList[right].content
    },
    openEdit () {
      this.editFlag = true
      this.editChild = false
    },
    handleSizeChange (val) {
      this.feedbackSearch.feedbackSPageSize = val
      this.loadList(this.feedbackSearch)
    },
    handleCurrentChange (val) {
      this.feedbackSearch.pageNo = val
      this.loadList(this.feedbackSearch)
    },
    changeFeedbackValue (item) {
      this.feedbackSearch.FeedbackValue = item.value
    },
    FeedbackValueSendMessage (item) {
      this.loadList(this.feedbackSearch)
    },
    toJSONarr () {
      for (var i in this.optionObj) {
        this.optionArr.push(this.optionObj[i])
      }
      this.optionArr = JSON.stringify(this.optionArr)
    },
    // 在当前页面简单编辑习题逻辑
    async editExercise () {
      const that = this
      const param = new URLSearchParams()
      param.append('content', this.editExerciseList.content)
      param.append('id', this.editExerciseList.id)
      param.append('kind', this.editExerciseList.kind)
      param.append('categoryId', this.editExerciseList.categoryId)
      param.append('categoryAlias', this.editExerciseList.categoryAlias)
      param.append('rightOption', this.rightOption)
      param.append('rightOptionContent', this.rightOptionContent)
      if (this.optionEditList.A.content) {
        this.optionObj.A.content = this.optionEditList.A.content
        this.optionObj.A.id = this.optionEditList.A.id
      } else {
        delete this.optionObj.A
      }
      if (this.optionEditList.B.content) {
        this.optionObj.B.content = this.optionEditList.B.content
        this.optionObj.B.id = this.optionEditList.B.id
      } else {
        delete this.optionObj.B
      }
      if (this.optionEditList.C.content) {
        this.optionObj.C.content = this.optionEditList.C.content
        this.optionObj.C.id = this.optionEditList.C.id
      } else {
        delete this.optionObj.C
      }
      if (this.optionEditList.D.content) {
        this.optionObj.D.content = this.optionEditList.D.content
        this.optionObj.D.id = this.optionEditList.D.id
      } else {
        delete this.optionObj.D
      }
      if (this.optionEditList.E.content) {
        this.optionObj.E.content = this.optionEditList.E.content
        this.optionObj.E.id = this.optionEditList.E.id
      } else {
        delete this.optionObj.E
      }
      if (this.optionEditList.F.content) {
        this.optionObj.F.content = this.optionEditList.F.content
        this.optionObj.F.id = this.optionEditList.F.id
      } else {
        delete this.optionObj.F
      }
      this.toJSONarr()
      param.append('choiceOptionList', this.optionArr)
      await this.$http8080
        .post(`/question-operate/modify`, param)
        .then(function (res) {
          if (res.data.statusCode === $$.s20002) {
            that.$message.success(res.data.statusMsg)
            that.editChild = false
            that.optionArr = []
            const param = new URLSearchParams()
            param.append('categoryId', that.acategoryId)
            param.append('categoryAlias', that.acategoryAlias)
            that.editFlag = false
            that.handleEdit(null, that.scopes)
          } else {
            that.$message.error('修改失败')
          }
        })
    },
    switchSearchFeedback (dealNum) {
      this.feedbackSearch.dealNot = dealNum
      this.loadList(this.feedbackSearch)
    },
    // 渲染所有反馈消息逻辑
    async loadList (feedbackObj) {
      const obj = feedbackObj
      const that = this
      const param = new URLSearchParams()
      param.append('PageSize', obj.PageSize)
      param.append('pageNo', obj.pageNo)
      param.append('deal', obj.dealNot)
      param.append('categoryNum', obj.FeedbackValue)
      this.$http8081
        .post(`/feedback-search/flipList`, param)
        .then(function (res) {
          if (res.data.statusCode === $$.s20006) {
            that.total = res.data.data.total
            that.loadingFlag = false
            that.tableData7 = res.data.data.records
          }
          if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.loadList(obj)
                }
              })
          }
        })
    },
    // 查看详情点击后渲染在页面上具体信息的推送
    async handleEdit (index, scope) {
      this.scopes = scope
      this.loadingFlag = true
      this.comment = scope.comment
      this.id = scope.id
      this.editChild = true
      const param = new URLSearchParams()
      param.append('id', scope.questionId)
      const that = this
      await this.$http8081
        .post(`/question-search/getById`, param)
        .then(function (res) {
          that.showList = res.data.data
          that.editExerciseList = res.data.data
          that.rightOption = that.editExerciseList.rightOption
          that.kind = that.editExerciseList.kind
          that.loadingFlag = false
          const options = res.data.data.choiceOptionList
          for (var key in options) {
            that.option[options[key].letter] = options[key]
            that.optionEditList = that.option
            // 选项
          }
        })
    },
    // 由未处理转换成已处理的逻辑
    async doDeal () {
      this.loadingFlag = true
      const param = new URLSearchParams()
      param.append('id', this.id)
      const that = this
      await this.$http8080
        .post(`/feedback-operate/doDeal`, param)
        .then(function (res) {
          if (res.data.statusCode === $$.s20002) {
            that.loadingFlag = false
            that.$message.success(res.data.statusMsg)
            that.editChild = false
            that.loadList(that.feedbackSearch)
          } else {
            that.loadingFlag = false
            that.$message.error(res.data.statusMsg)
          }
        })
    },
    cancel () {
      this.editFlag = false
      this.editChild = false
    }
  }
}
</script>
<style>
.switchStyle {
  margin: 0 25px;
}
.inputStyle {
  width: 340px;
  border: 0px solid #ccc;
}
.showStatus {
  width: 400px;
  height: 500px;
  position: absolute;
  top: 84px;
  right: 10%;
}
.buttonStyle {
  width: 400px;
  margin: 0 auto;
}
.pagenation1 {
  position: absolute;
  right: 60px;
  top: 20px;
}
.editInput {
  width: 400px;
}
/* .el-input {
  width: auto;
} */
.editInfo {
  position: absolute;
  right: 120px;
  bottom: 120px;
}
</style>
